<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <!-- <link rel="stylesheet" type="text/css" href="../css/api.css" /> -->
     <script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
	<script>
	        var vConsole = new VConsole()
	</script>
    <style type="text/css">
        html,
        body {
            height: 100%;
            /* position: absolute;
            z-index: 100000; */
        }

        .wrap {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-flex-flow: column;
            position: relative;
        }

        header {
            height: 44px;
            width: 100%;
            text-align: center;
            background-color: #81a9c3;
            color: #fff;
            line-height: 44px;
            font-size: 20px;
        }

        .flex-1 {
            display:flex;
            flex-direction: row;
            flex-wrap: wrap;
            flex:1;
        }

        footer {
            height: 30px;
            width: 100%;
            background-color: #81a9c3;
            color: white;
            line-height: 30px;
            text-align: center;
        }

        .function{
            font-size: 16px;
            padding: 5px 10px;
            border: 1px solid blue;
            border-radius: 3px;
            margin: 5px;
            text-align: center;
            z-index : 9999;
        }

        .live-info{
            display: inline-block;
        }
         
        .live-info .label{
            display: inline-block;
        }

        .live-info input{
            width: 60px;
        }

        .bottom {
            position: absolute;
            bottom: 0;
            z-index: 0;
            /* display: none; */
        }

        .padding-5{
            padding: 0px 5px;
        }

    </style>
</head>

<body class="wrap">
    <div  class="bottom">
        <div class="padding-5" >
            <div class="live-info">
                <div >
                    <div class="label">roomId</div>
                    <input  class="input" type="text" id="roomId"    placeholder="请输入roomId" value="1001">  
                </div>
                <div >
                    <div class="label">userId</div>
                    <input  class="input" type="text" id="userId"   placeholder="请输入userId"  value="1002">  
                </div>
                <div>
                    <div class="label">streamId</div>
                    <input  class="input"  type="text"  id="streamId"  placeholder="请输入streamId" value="1001">  
                </div>
            </div> 
            <div class="live-info">
                <div>
                    <div class="label">LinkUserId</div>
                    <input  class="input" type="text" id="linkUserId"    placeholder="请输入linkUserId" value="">  
                </div>
                <div >
                    <div class="label">LinkStreamId</div>
                    <input  class="input" type="text" id="linkStreamId"   placeholder="请输入linkStreamId"  value="">  
                </div>
                <div style="display: none;" >
                    <div class="label">LinkStreamType</div>
                    <input  class="input" type="text" id="linkStreamType"   placeholder="请输入linkStreamType"  value="">  
                </div>
            </div> 
            <div class="live-info" style="display: none;">
                <div>
                    <div class="label">LinkUserId2</div>
                    <input  class="input" type="text" id="linkUserId2"    placeholder="请输入linkUserId2" value="">  
                </div>
                <div >
                    <div class="label">LinkStreamId2</div>
                    <input  class="input" type="text" id="linkStreamId2"   placeholder="请输入linkStreamId2"  value="">  
                </div>
                <div >
                    <div class="label">LinkStreamType</div>
                    <input  class="input" type="text" id="linkStreamType2"   placeholder="请输入linkStreamType2"  value="">  
                </div>
            </div> 
        </div>    
        <div class="flex-1">
            <div class='function' onclick="startPreview()">预览</div>
            <div class='function' onclick="enterRoom()">进入房间</div>
            <div class='function' onclick="switchCamera()">翻转摄像头</div>
            <div class='function' onclick="stopPreview()">停止预览</div>
            <div class='function' onclick="exitRoom()">退出房间</div>
            <div class='function' onclick="randomUserId()">随机用户ID</div>
            <div class='function' id="setLocalViewBig" onclick="setLocalViewBig()">本地视频小屏</div>
            <div class='function' id="startLink" onclick="startLink()">接受连麦</div>
            <div class='function' id="openMeiYan" onclick="openMeiYan()">打开美颜</div>
        </div>
        <div>

        </div>
    </div>    
    <!-- <iframe src="html/beauty.html" style="z-index:9999" width="100%" height="100%"> 
        
    </iframe> -->
</body>

<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/lib/lib-generate-test-usersig.min.js"></script>
<script type="text/javascript" src="../script/lib/md5.js"></script>
<script type="text/javascript" src="../script/lib/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../script/mhsdk.js"></script>
<script type="text/javascript" >

    apiready = function name(params) {
        //sdk初始化
        mhsdkApi.mhInit();
        //设置用户远端视频可见回调
        mhsdkApi.setOnUserVideoAvaialeListener(onUserVideoAvailable);
        var cameraPermission = 'camera'
        var microphonePermission = 'microphone'
        var permissions = [cameraPermission,microphonePermission]
        var resultList = api.hasPermission({
            list: permissions
        });
         if(resultList[0].granted && resultList[1].granted){
            mhsdkApi.startPreview()
        } else{
            api.requestPermission({
                list: permissions,
            }, function(res) {
                if (res.list[0].granted && res.list[1].granted) {
                    mhsdkApi.startPreview()
                }
            });
        }

    }
    //腾讯TRTC APPId
    let sdkAppId =  1400773906
    //腾讯trtc密钥
    let appSecretKey =  'e7f0d3f39d52efeb743114dc9813b5c4993382da285572cbaafd35394d3468ac'
    let EXPIRETIME = 604800
    let localVideoBig =  0
    let linkText = '接受连麦'
    let linkFlag = false
    let localVideoText = '本地视频小屏'
    let linkUsers = []
    let linkUserId = ''
    let linkStreamId = ''
    let linkUserId2 = ''
    let linkStreamId2 = ''

    

    function enterRoom(){
        let userId = $('#userId').val()
        let generator = new LibGenerateTestUserSig(sdkAppId, appSecretKey, EXPIRETIME);
        let userSig = generator.genTestUserSig(userId);

        let roomId = $('#roomId').val()
        let streamId = $('#streamId').val()

       mhsdkApi.enterRoom({
            roomId:roomId,
            userId:userId,
            streamId:streamId,
            userSig:userSig,
            localViewBig:localVideoBig
        })
    }
function switchCamera(){
        console.log("--switch->")
        mhsdkApi.switchCamera({});
    }

    function onUserVideoAvailable(ret){
        console.log('--onvideo->',ret);
        let data  = ret.detail
        if (data.code == '1'){ //连麦
            if(linkUsers.length == 0){
                linkUserId = data.msg
                linkStreamId = data.msg
            }else{
                linkUserId2 = data.msg
                linkStreamId2 = data.msg
            }
            linkUsers.push(data.msg)
        }else{
            // linkUsers.splice(linkUsers.indexOf(data.msg), 1)
        }
        $('#linkUserId').val(linkUserId)
        $('#linkStreamId').val(linkStreamId)
        $('#linkUserId2').val(linkUserId2)
        $('#linkStreamId2').val(linkStreamId2)
    }

        function randomUserId(){
        let userId = Math.floor((Math.random()*100)+1) + ''
        $('#userId').val(userId)
    }

    function stopPreview(){
        mhsdkApi.stopPreview({});
    }

    

    function setLocalViewBig(){
        if (localVideoBig == 1){
            localVideoBig  = 0 
            localVideoText = '本地视频小屏'
        }else {
            localVideoBig  = 1 
            localVideoText = '本地视频大屏' 
        } 
        $('#setLocalViewBig').text(localVideoText)
    }

    function startLink(){
        linkFlag = !linkFlag
        let linkUserId = $('#linkUserId').val()
        let linkStreamId = $('#linkStreamId').val()
        let playUrl = ''
        if (linkFlag){
            mhsdkApi.startLink({
                linkUserId:linkUserId,
                linkStreamId:linkStreamId,
                playUrl:playUrl,
                localVideoBig:localVideoBig
            })					
            linkText = "结束连麦"
         }else{
            mhsdkApi.stopLink({arg:linkUserId})
            linkText = "接受连麦"
        }  
        $('#startLink').text(linkText)
    }



    function exitRoom(){
        mhsdkApi.exitRoom({})
    }

   
    function genTestUserSig(userId) {
        let  generator = new LibGenerateTestUserSig(sdkAppId, appSecretKey, EXPIRETIME)
        let  userSig = generator.genTestUserSig(userId)
        return userSig
    }
    function startPreview(){
        mhsdkApi.startPreview();
    }

    function openMeiYan() {
        mhsdkApi.openMeiYan();
    }
    
    
</script>



</html>
